<!doctype html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>网上共青团・智慧团建</title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <link th:href="@{/proscenium/css/index.css}" rel="stylesheet"/>
    <link th:href="@{/proscenium/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <!--    <script th:src="@{/proscenium/js/silder.js}"></script>-->
</head>

<body>
<div class="container">
    <header>
        <div class="title_item">
            <img th:src="@{/proscenium/images/a_03.jpg}" alt="">
            <h1>网上共青团・智慧团建</h1>
        </div>
        <!-- 导航栏 -->
        <nav id="nav" class="box">
            <ul>
                <li><a href="index.html">网站首页</a></li>
                <li><a href="#">机构设置</a></li>
                <li><a href="#">政策法规</a></li>
                <li><a href="#">纪检监察</a></li>
                <li><a href="#">政务公开</a></li>
                <li><a href="#">下载专区</a></li>
                <li><a href="#">办事指南</a></li>
            </ul>
        </nav>

    </header>
    <!--头部 end-->
    <div class="banner box"></div>
    <div class="box">
        <div class="news left">
            <h2><span class="more">
                <!--<a href="/" target="_blank">更多..</a>-->
            </span><span style="display: inline-block; margin: 2px">新闻中心&nbsp;&nbsp;&nbsp;&nbsp;News</span></h2>
            <ul>
                <div class="pic_news left"></div>
                <div class="center_news right">
                    <section class="c_n_top">
                        <h3>热门</h3>
                        <p>
                            <span th:text="${articles[0].articleTitles}"></span>
                            [<a th:href="@{/proscenium/new/}+${articles[0].articleId}" target="_blank">详情</a>]
                        </p>
                    </section>
                    <ul>
                        <li>
                            <a target="_blank"
                               th:href="@{/proscenium/new/}+${articles[1].articleId}"
                               th:text="${articles[1].articleTitles}">
                            </a>
                            <img th:src="@{/proscenium/images/new.gif}">
                        </li>
                        <li>
                            <a target="_blank"
                               th:href="@{/proscenium/new/}+${articles[2].articleId}"
                               th:text="${articles[2].articleTitles}">
                            </a>
                            <img th:src="@{/proscenium/images/new.gif}">
                        </li>
                        <li>
                            <a target="_blank"
                               th:href="@{/proscenium/new/}+${articles[3].articleId}"
                               th:text="${articles[3].articleTitles}">
                            </a>
                        </li>
                        <li>
                            <a target="_blank"
                               th:href="@{/proscenium/new/}+${articles[4].articleId}"
                               th:text="${articles[4].articleTitles}">
                            </a>
                        </li>
                    </ul>
                </div>
            </ul>
        </div>
        <!-- 用户信息表单 -->
        <div class="announce right">
            <h2><a th:href="@{/backstage/login}"
                   style="display:block;float:right;margin-top: 3px;margin-right: 20px">登录</a></h2>
            <div class="loginDiv">
                <p style="padding-top: 10px;font-size: 16px;font-weight:bold">密码登录</p>
                <form action="" id="userInfo">
                    <div class="input-group">
                        <span class=" input-group-addon glyphicon glyphicon-user"></span>
                        <input type="text" class="form-control" placeholder="用户名" name="username">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon glyphicon glyphicon-lock"></span>
                        <input type="text" class="form-control" placeholder="密码" name="password">
                    </div>
                    <div>
                        <button type="button" id="subBtn" class="btn btn-danger" style="width:215px;height: 40px;">登录
                        </button>
                    </div>
                    <a href=""><span style="float:right;color: #c10021;padding-top: 10px">忘记密码</span></a>
                </form>
            </div>
        </div>
        <div class="blank"></div>
        <div class="ad left"><img th:src="@{/proscenium/images/ad01.jpg}"></div>
        <div class="ad right"><img th:src="@{/proscenium/images/ad02.jpg}"></div>
        <div class="blank"></div>
        <div class="linews left">
            <h3><span th:text="${columns[0].columnName}">
<!--                <a href="/" class="more">更多..</a>-->
            </span></h3>
            <ul>
                <li th:each="article:${articlesList[0]}">
                    <a target="_blank"
                       th:href="@{/proscenium/new/}+${article.articleId}"
                       th:text="${article.articleTitles}">
                    </a>
                </li>
            </ul>
        </div>
        <div class="linews left ln">
            <h3><span th:text="${columns[1].columnName}">
<!--                <a href="/" class="more">更多..</a>-->
            </span></h3>
            <ul>
                <li th:each="article:${articlesList[1]}">
                    <a target="_blank"
                       th:href="@{/proscenium/new/}+${article.articleId}"
                       th:text="${article.articleTitles}">
                    </a>
                </li>
            </ul>
        </div>
        <div class="linews right">
            <h3><span th:text="${columns[2].columnName}">
<!--                <a href="/" class="more">更多..</a>-->
            </span></h3>
            <ul>
                <li th:each="article:${articlesList[2]}">
                    <a target="_blank"
                       th:href="@{/proscenium/new/}+${article.articleId}"
                       th:text="${article.articleTitles}">
                    </a>
                </li>
            </ul>
        </div>
        <div class="blank"></div>
        <div class="linews left">
            <h3><span th:text="${columns[3].columnName}">
<!--                <a href="/" class="more">更多..</a>-->
            </span></h3>
            <ul>
                <li th:each="article:${articlesList[3]}">
                    <a target="_blank"
                       th:href="@{/proscenium/new/}+${article.articleId}"
                       th:text="${article.articleTitles}">
                    </a>
                </li>
            </ul>
        </div>
        <div class="linews left ln">
            <h3><span th:text="${columns[4].columnName}">
<!--                <a href="/" class="more">更多..</a>-->
            </span></h3>
            <ul>
                <li th:each="article:${articlesList[4]}">
                    <a target="_blank"
                       th:href="@{/proscenium/new/}+${article.articleId}"
                       th:text="${article.articleTitles}">
                    </a>
                </li>
            </ul>
        </div>
        <div class="linews right">
            <h3><span th:text="${columns[5].columnName}">
<!--                <a href="/" class="more">更多..</a>-->
            </span></h3>
            <ul>
                <li th:each="article:${articlesList[5]}">
                    <a target="_blank"
                       th:href="@{/proscenium/new/}+${article.articleId}"
                       th:text="${article.articleTitles}">
                    </a>
                </li>
            </ul>
        </div>
        <div class="blank"></div>
        <!-- 图片 分享正青春，分享正能量 -->
        <div class="ad03">
        </div>
        <div class="blank"></div>
        <div class="zhishu left">
            <h3 style="font-size:19px">直属单位
                <ul id="tab">
                    <li><a href="/">团情联播</a></li>
                    <li><a href="/">团青互动</a></li>
                    <li><a href="/">青年活动</a></li>
                    <li><a href="/">青春手册</a></li>
                    <li><a href="/">活力支部</a></li>
                    <li><a href="/">魅力团干</a></li>
                </ul>
            </h3>
            <section>
                <div id="content">
                    <ul style="display:block;">
                        <div class="zs_pic left"><img th:src="@{/proscenium/images/newspic1.jpg}"></div>
                        <div class="zs_news right">
                            <ol>
                                <li th:each="article:${articlesList[0]}">
                                    <a target="_blank"
                                       th:href="@{/proscenium/new/}+${article.articleId}"
                                       th:text="${article.articleTitles}">
                                        <span th:text="${article.articleCreationDate}"></span>
                                    </a>
                                </li>
                            </ol>
                        </div>
                    </ul>
                    <!--                    <ul>-->
                    <!--                        <div class="zs_pic left"><img th:src="@{/proscenium/images/newspic1.jpg}"></div>-->
                    <!--                        <div class="zs_news right">-->
                    <!--                            <ol>-->
                    <!--                                <li><a href="/" target="_blank"><span>2013-12-24</span>测试标题...... </a></li>-->
                    <!--                            </ol>-->
                    <!--                        </div>-->
                    <!--                    </ul>-->
                </div>
            </section>
        </div>
        <div class="hd right">
            <h3>互动交流</h3>
            <ul>
                <li><a href="/">投诉举报</a></li>
                <li><a href="/">局长信箱</a></li>
            </ul>
        </div>
        <div class="blank"></div>
    </div>
    <!-- 友情链接 -->
    <footer>
        <div class="footnav">
            <ul>
                <li><a href="/">团情联播</a></li>
                <li><a href="/">团青互动</a></li>
                <li><a href="/">青年活动</a></li>
                <li><a href="/">青春手册</a></li>
                <li><a href="/">活力支部</a></li>
                <li><a href="/">魅力团干</a></li>
            </ul>
        </div>
    </footer>
</div>
</body>
</section>
</html>